<template>
	<view class="music-head" :style="{ color: fontColor }">
		<view class="music-head-icon" v-if="showIcon" :style="{ top: top + 'px' }">
			<text class="iconfont iconzuojiantou" @tap="toBackHandle"></text>
			|
			<text class="iconfont iconshouye" @tap="toHomeHnadle"></text>
		</view>
		<text class="title" :style="{ top: top + 'px' }">{{ title }}</text>
	</view>
</template>

<script>
export default {
	name: 'music_head',
	props: {
		// 标题
		title: String,
		// 是否显示图标
		showIcon: Boolean,
		// 字体颜色
		fontColor: String,
		// 顶部距离
		top: Number
	},
	data() {
		return {};
	},
	methods: {
		// 返回按钮
		toBackHandle() {
			uni.navigateBack();
		},
		// 回到首页
		toHomeHnadle() {
			uni.navigateTo({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.music-head {
	width: 100%;
	height: 75px;
	font-size: 16px;
	line-height: 32px;
	text-align: center;
	position: relative;
	z-index: 100;
	.music-head-icon {
		position: absolute;
		left: 8px;
		width: 85px;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
		display: flex;
		justify-content: space-evenly;
		color: black;
		background-color: rgba(251, 251, 251, 0.7);
		border: 1px solid rgba(227, 227, 227, 0.7);
	}
	.title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100vw - 87px - 87px - 30px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>
